$page-prefix-cls: "#{$css-prefix}page";
.#{$page-prefix-cls} {
  user-select:none;
  -webkit-user-slect:none;
  -ms-user-slect:none;
  -moz-user-slect:none;
  font-size:$page-font-size;
  &:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
  }
  &-item {
    display: inline-block;
    //float: left;
    vertical-align: middle;
    min-width: $page-item-min-width;
    height: $page-item-height;
    line-height: $page-item-line-height;
    margin-right: $page-item-margin-right;
    text-align: center;
    list-style: none;
    background-color: $page-item-background-color;
    user-select: none;
    cursor: pointer;
    font-family: Arial;
    border: 1px solid $border-color-base;
    border-radius: $btn-border-radius;
    //transition: all @transition-time @ease-in-out;
    transition: border $transition-time $ease-in-out, color $transition-time $ease-in-out;
    a {
      margin:$page-a-margin;
      text-decoration: none;
      color: $page-a-color;
      //transition: none;
    }
    &:hover {
      border-color: $primary-color;
      a {
        color: $primary-color;
      }
    }
    &-active {
      background-color: $primary-color;
      border-color: $primary-color;
      a,
      &:hover a {
        color: $page-item-active-hover-a-color;
      }
    }
  }
  &-item-jump-prev,
  &-item-jump-next {
    &:after {
      content: "•••";
      display: block;
      letter-spacing: 1px;
      color: $page-jump-next-after-color;
      text-align: center;
    }
    i {
      display: none;
    }
    &:hover {
      &:after {
        display: none;
      }
      i {
        display: inline;
      }
    }
  }
  &-item-jump-prev:hover {
    i:after {
      content: "\e733";
      margin-left: $page-item-jump-prev-hover-after-margin-left;
    }
  }
  &-item-jump-next:hover {
    i:after {
      content: "\e704";
      margin-left: $page-item-jump-next-hover-after-margin-left;
    }
  }
  &-prev {
    margin-right: $page-prev-margin-right;
  }
  &-item-jump-prev,
  &-item-jump-next {
      margin-right: $page-item-jump-next-margin-right;
  }
  &-next {
      margin-left: $page-next-margin-left;
  }
  &-prev,
  &-next,
  &-item-jump-prev,
  &-item-jump-next {
    display: inline-block;
    vertical-align: middle;
    //float: left;
    min-width: $page-item-min-width;
    height: $page-item-height;
    line-height: $page-item-line-height;
    list-style: none;
    text-align: center;
    cursor: pointer;
    color: $page-jump-next-color;
    font-family: Arial;
    border: 1px solid $border-color-base;
    border-radius: $btn-border-radius;
    transition: all $transition-time $ease-in-out;
  }
  &-prev,
  &-next {
    //background-color: #F7F7F7;
    a {
      color: $page-next-a-color;
      font-size: $page-next-a-font-size;
    }
    &:hover {
      border-color: $primary-color;
      a {
          color: $primary-color;
      }
    }
  }
  &-disabled {
    cursor: $cursor-disabled;
    background-color:$page-disabled-bgcolor;
    border-color:$page-disabled-color;
    a {
      color: $page-disabled-color;
    }
    &:hover {
      border-color:$page-disabled-hover-border-color;
      a {
        color: $page-disabled-color;
        cursor: $cursor-disabled;
      }
    }
  }
  &-options {
    display: inline-block;
    vertical-align: middle;
    //float: left;
    margin-left:$page-options-margin-left;
    &-sizer {
      display: inline-block;
      //float: left;
      margin-right: $page-options-sizer-margin-right;
      .h-select-single{
        height:$page-item-height;
        .h-select-selection{
          height:$page-item-height;
          .h-select-placeholder {
            height: $page-option-select-height;
            line-height: $page-option-select-height;
          }
          .h-select-selected-value {
            height: $page-option-select-height;
            line-height: $page-option-select-height;
          }
        }
      }
    }
    &-sizer-label {
      display: inline-block;
      margin-right: $page-options-sizer-label-margin-right; 
    }
    &-elevator {
      display: inline-block;
      vertical-align: middle;
      //float: left;
      height: $page-item-height;
      line-height:$page-item-height;
      font-size:$page-font-size;
      input {
        @include input();
        line-height: $page-options-elevator-input-line-height;
        height: $page-item-height;
        border-radius: $btn-border-radius;
        margin: $page-options-elevator-input-margin;
        width: $page-options-elevator-input-width;
      }
    }
    &-reload{
      display: inline-block;
      vertical-align: middle;
      margin-left: $page-options-reload-margin-left;
       a{
        display: inline-block;
        vertical-align: middle;
        min-width: $page-options-reload-a-min-width;
        height: $page-options-reload-a-height;
        line-height: $page-options-reload-a-line-height;
        list-style: none;
        text-align: center;
        cursor: pointer;
        color: $page-options-reload-a-color;
        font-family: Arial;
        border:$page-options-reload-a-border;
        border-radius: $page-options-reload-a-border-radius;
        transition: $page-options-reload-a-transition;
       }
    }
  }
  &-total {
    display: inline-block;
    //float: left;
    height: $btn-circle-size;
    line-height: $btn-circle-size;
    margin-right: $page-total-margin-right;
  }
  &-simple &-prev,
  &-simple &-next {
    margin: $page-simple-next-margin;
    border: $page-simple-next-border;
    height:$page-simple-next-height;
    line-height: $page-simple-next-line-height;
    font-size: $page-simple-next-font-size;
  }
  &-simple >&-disabled{
    background: $page-simple-disabled-background;
  }
  &-simple &-simple-pager {
    display: inline-block;
    //float: left;
    margin-right: $page-simple-margin-right;
    input {
      min-width: $page-simple-input-min-width;
      height: $page-simple-input-height;
      margin:$page-simple-input-margin;
      padding: $page-simple-input-padding;
      text-align: center;
      box-sizing: border-box;
      background-color: $page-simple-input-background-color;
      outline: none;
      border: 1px solid $border-color-base;
      border-radius: $btn-border-radius;
      transition: border-color $transition-time $ease-in-out;
      &:hover {
        border-color: $primary-color;
      }
    }
    span {
      padding: $page-simple-span-padding;
    }
    span.#{$page-prefix-cls}-allpage {
      display: inline-block;
      padding-right: 0;
    }
  }
}

.#{$page-prefix-cls} {
  &.mini &-disabled{
    background-color: $page-mini-background-color;
  }

  &.mini &-total {
    height: $btn-circle-size-small;
    line-height: $btn-circle-size-small;
  }
  &.mini &-item {
    border: $page-mini-item-border;
    margin:$page-mini-item-margin;
    min-width: $btn-circle-size-small;
    height: $btn-circle-size-small;
    line-height: $btn-circle-size-small;
    border-radius: $btn-border-radius-small;
  }
  &.mini &-prev,
  &.mini &-next {
    margin:$page-mini-next-margin;
    min-width: $btn-circle-size-small;
    height: $btn-circle-size-small;
    line-height: $btn-circle-size-small;
    border:$page-mini-next-border;
    a {
      i:after {
        height: $btn-circle-size-small;
        line-height: $btn-circle-size-small;
      }
    }
  }
  &.mini &-item-jump-prev,
  &.mini &-item-jump-next {
      height: $btn-circle-size-small;
      line-height: $btn-circle-size-small;
      border: none;
      margin-right:$page-mini-item-jump-next-margin-right;
  }
  &.mini &-options {
    margin-left:$page-mini-options-margin-left;
    &-elevator {
      height: $btn-circle-size-small;
      line-height: $btn-circle-size-small;
      input {
        @include input-small();
        width: $page-mini-options-elevator-input-width;
      } 
    }
    &-reload{
      margin-left:$page-mini-options-margin-left;
      a{
        border: $page-mini-options-reload-a-border;
        min-width: btn-circle-size-small;
        height: btn-circle-size-small;
        line-height: btn-circle-size-small;
      }
    }
  }
}